<template>
    <div class="jbxx">
        <div class="fontGjqy">
            <span style="padding: 14px 0 0px 0">基本信息</span>
        </div>
        <div class="zyjjmbDetailAdd">
            <el-form ref="dynamicValidateForm" :model="form" :rules="rules" label-width="180px" style="height: 100%;margin-bottom: 35px">

                <div class="txsxstyle" :style="{height:(form.gxsxArr&&form.gxsxArr.length>0)?'50%':'100%'}">
                    <span class="style_title">基本信息</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item label="人防单位名称"
                                          prop="treeValue">
                                <el-cascader :disabled="isNopower()"
                                        :options="dataList"
                                        :props="{ checkStrictly: true }"
                                        class="noBg border1"
                                        style="width:437px;height: 37px;"
                                        v-model="form.treeValue"
                                        clearable
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item
                                    v-for="(item, index) in form.jbsxArr"
                                    :label="item.sxmc"
                                    :key="index"
                                    :prop="'jbsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-input :disabled="isNopower()"
                                        class="noBg border1"
                                        v-if="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                ></el-input>
                                <el-input
                                        :disabled="item.sxlx=='jwdval'"
                                        class="noBg border1"
                                        v-if="item.sxlx=='jwdval'"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        @click="jwdval(index,item)"
                                ></el-input>
                                <el-select :disabled="isNopower()"
                                        class="noBg border1"
                                        :style="{width: item.sxzd=='mbxzhuang'&&!isNopower()?'287px':'440px'}"
                                        v-model="item.sxvalue"
                                        v-if="item.sxlx == 1"
                                        placeholder="请选择"
                                >
                                    <el-option
                                            v-for="option in item.selectOption"
                                            :key="option.zdID"
                                            :label="option.zdmc"
                                            :value="option.zdID"
                                    ></el-option>
                                </el-select>
                                <el-button type="mini" v-if="item.sxzd=='mbxzhuang'&&!isNopower()" class="btnDefault ml20" @click="mbxzhuang(index,item)">录入形状坐标</el-button>
                                <el-date-picker :disabled="isNopower()"
                                        class="noBg border1"
                                        style="width: 440px;"
                                        v-model="item.sxvalue"
                                        v-if="item.sxlx == 2"
                                        type="datetime"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="txsxstyle" v-if="form.gxsxArr&&form.gxsxArr.length>0">
                    <span class="style_title">特性属性</span>
                    <div class="txsxstyle_box">
                        <div class="formBox">
                            <el-form-item
                                    v-for="(item, index) in form.gxsxArr"
                                    :key="index"
                                    :label="item.sxmc"
                                    :prop="'gxsxArr.' + index + '.sxvalue'"
                                    :rules="checkRules(item)"
                            >
                                <el-tooltip class="item" effect="dark" :content="item.description" :disabled="item.sxlx=='1'" placement="bottom">
                                    <el-input :disabled="isNopower()"
                                            class="noBg border1"
                                            v-if="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5"
                                            style="width: 440px;"
                                            v-model="item.sxvalue"
                                    ></el-input>
                                    <el-select :disabled="isNopower()"
                                            class="noBg border1"
                                            style="width: 440px;"
                                            v-model="item.sxvalue"
                                            v-if="item.sxlx == 1"
                                            placeholder="请选择"
                                    >
                                        <el-option
                                                v-for="option in item.selectOption"
                                                :key="option.zdID"
                                                :label="option.zdmc"
                                                :value="option.zdID"
                                        ></el-option>
                                    </el-select>
                                    <el-date-picker :disabled="isNopower()"
                                            class="noBg border1"
                                            style="width: 440px;"
                                            v-model="item.sxvalue"
                                            v-if="item.sxlx == 2"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="timestamp"
                                            type="datetime"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-tooltip>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>
            <div class="textRight mt15">
                <el-button class="btnDefault" @click="submitZyjjmb" v-if="!isNopower()"
                >保存
                </el-button>
                <el-button class="btnDefault" @click="backList">取消</el-button>
            </div>
        </div>
        <el-dialog class="jwdDialog" title="经纬度信息" :visible.sync="jwdDialog" :close-on-click-modal="false">
            <el-tabs type="card" @tab-click="handleClick">
                <el-tab-pane label="手动输入">
                    <el-form :model="jwdForm" label-width="120px" class="dialogDmt" ref="jwdFormCheck">
                        <div   v-for="(item, index) in jwdForm.jwdArr" :key="index">
                            <el-form-item style="width: 45%;display: inline-block;"
                                          :label="'经度'+(index+1)"
                                          :prop="'jwdArr[' + index + '][0]'"
                                          :rules="checkJwd('jd')"
                            >
                                <div class="flexMiddleCenter" style="width:200px">
                                    <el-input
                                              class="noBg border1"
                                              v-model="item[0]"
                                    ></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item style="width: 45%;display: inline-block;"
                                          :label="'纬度'+(index+1)"
                                          :prop="'jwdArr[' + index + '][1]'"
                                          :rules="checkJwd('wd')"
                            >
                                <div class="flexMiddleCenter " style="width:200px">
                                    <el-input
                                              class="noBg border1"
                                              v-model="item[1]"
                                    ></el-input>

                                </div>
                            </el-form-item>
                            <i class="el-icon-circle-plus-outline font24 ml20" @click="addJwdArr" v-if="index==jwdForm.jwdArr.length-1"></i>
                            <i class="el-icon-remove-outline font24 ml20" @click="deleteJwdArr(index)" v-if="xingzhuang.sxvalue=='40002'?((index>0) && (index!=jwdForm.jwdArr.length-1)):((index>1) && (index!=jwdForm.jwdArr.length-1))"></i>
                        </div>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="地图选择">
                    <mapSelect @mapArr="getjwdMapArr" v-if="jwdMapSelect&&jwdDialog" :mapSelectType="mapSelectType" ref="mapChild"></mapSelect>
                </el-tab-pane>
            </el-tabs>

            <div slot="footer"
                 class="dialog-footer">
                <el-button @click="savejwdArr" class="btnDefault">保存</el-button>
                <el-button @click="jwdDialog=false" class="btnDefault">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import "../../assets/css/global.css";
  import { baseServe } from "../../request/api";
  import MapSelect from "../../components/base/map.vue"

  export default {
    name: "jbxx",
    data() {
      return {
        mapSelectType: '',
        jwdMapArr:[],
        jwdMapSelect: false,
        jwdDialog:false,
        jwdForm:{
          jwdArr:[['','']],
        },
        xingzhuang:{
          sxvalue:'',
          index:'',
          jwdArr:[]
        },
        form: {
          treeValue: [],
          jbsxArr: [],
          gxsxArr: []
        },
        selecrArrList: [],
        dialogFormEditShow: true,
        dataList: [],
        rules: {
          treeValue: [
            { required: true, message: "请选择人防单位", trigger: ["change", "blur"] }
          ]
        }
      };
    },
    mounted() {
      this.selecrArrList = [];
      this.treeList();
      this.getZyjjmbSX();
    },
    computed: {
      categoryId() {
        return this.$store.state.categoryId;
      },
      zyjjmbId() {
        return this.$store.state.zyjjmbId;
      },

    },
    beforeRouteEnter(to, from, next) {
      next(vm => { // 通过 `vm` 访问组件实例

      })
    },
    watch: {
      zyjjmbId() {
        this.getZyjjmbSX();
      },
      categoryId() {
        this.getZyjjmbSX();
      }
    },
    methods: {
      getjwdMapArr(data) {
        this.jwdMapArr = data;
      },
      handleClick() {
        this.jwdMapSelect = !this.jwdMapSelect;
      },
      checkJwd(type) {
        let arr = [{ required: true, message: "必填选项", trigger: ["change", "blur"] }];
        if (type == "jd") {
          arr.push({ validator: this.checkJD, trigger: ["change", "blur"] });
        }
        if (type == "wd") {
          arr.push({validator: this.checkWD, trigger: ["change", "blur"] });
        }
        return arr;
      },
      addJwdArr() {
        this.jwdForm.jwdArr.push(['','']);
      },
      deleteJwdArr(index) {
        this.jwdForm.jwdArr.splice(index, 1);
      },
      setMbxzhuang(methods,index,item){
        if(this[methods]){
          this[methods](index,item);
        }
      },
      jwdval(index,item){
        this.jwdForm.jwdArr=this.xingzhuang.jwdArr
        this.jwdDialog=true
      },
      mbxzhuang(index,item){
        if(!item.sxvalue){
          this.$message({ type: "warning", message: "请选择目标形状" });
          return
        }
        if(item.sxvalue==4001){
          this.mapSelectType = 'Point'
          this.xingzhuang.sxvalue=4001
          this.xingzhuang.index=index
          this.jwdForm.jwdArr=[['','']]
          this.jwdDialog=true
        }else if(item.sxvalue==4002){
          this.mapSelectType = 'LineString'
          this.xingzhuang.sxvalue=4002
          this.xingzhuang.index=index
          this.jwdForm.jwdArr=[['',''],['','']]
          this.jwdDialog=true

        }else if(item.sxvalue==4003){
          this.mapSelectType = 'Polygon'
          this.xingzhuang.sxvalue=4003
          this.xingzhuang.index=index
          this.jwdForm.jwdArr=[['',''],['',''],['','']]
          this.jwdDialog=true
        }
      },
      savejwdArr(){
        console.log(this.jwdMapArr)

            if(this.jwdMapSelect){
              this.$refs.mapChild.saveCoordinate();
            }else{
              this.$refs["jwdFormCheck"].validate((valid) => {
                console.log(valid)
                if (!valid) {
                  return
                }
              })
            }
            let temp = {}
            if(this.jwdMapSelect){
              temp= {"sxvalue":this.jwdMapArr, "sxID": "jwd", "sxmc": `${this.xingzhuang.sxvalue==4002?'线':'面'}的点集合`, "sxlx": "jwdval", "description": null, "sxzd": "jwd", "isbt": "1" }
            }else{
              temp= {"sxvalue":this.jwdForm.jwdArr, "sxID": "jwd", "sxmc": `${this.xingzhuang.sxvalue==4002?'线':'面'}的点集合`, "sxlx": "jwdval", "description": null, "sxzd": "jwd", "isbt": "1" }
            }

            if( this.xingzhuang.sxvalue==4001){
              this.form.jbsxArr.map((v,i)=>{
                if(v.sxzd=='jd'){
                  v.sxvalue=this.jwdMapArr[0]
                }
                if(v.sxzd=='wd'){
                  v.sxvalue=this.jwdMapArr[1]
                }
                if(v.sxzd=='jwd'){
                  this.form.jbsxArr.splice(i,1)
                }
              })
              this.xingzhuang.jwdArr=[]
            }else{
              if(this.xingzhuang.jwdArr&&this.xingzhuang.jwdArr.length>0){
                this.form.jbsxArr.splice(this.xingzhuang.index+1,1,temp)
              }else{
                this.form.jbsxArr.splice(this.xingzhuang.index+1,0,temp)
              }

              this.xingzhuang.jwdArr=this.jwdMapSelect?this.jwdMapArr:this.jwdForm.jwdArr
            }

        // this.jwdForm.jwdArr=this.jwdMapSelect?this.jwdMapArr:this.jwdForm.jwdArr

        this.jwdDialog=false



      },
      checkCityChildrenArr(arr){
        arr.map(v => {
          if (v.children&&v.children.length>0) {
            v.children=this.checkCityChildrenArr(v.children);
          }else{
            delete  v.children
          }
        });
        return arr
      },
      treeList() {
        this.dataList = [];
        let params = {
          rfdwnm: localStorage.getItem('rfdwnm')
        };
        baseServe.cityList(params ).then(res => {

          res = res.data.qgrfdwModels;

          res.forEach(item => {
            this.dataList.push({
              label: item.rfdwmc,
              value: item.xh,
              children: item.qgrfdwModels.map(i => {
                let obj = {
                  label: i.rfdwmc,
                  value: i.xh,
                  children: i.qgrfdwModels.map(j => {
                    let obj = {
                      label: j.rfdwmc,
                      value: j.xh
                    };
                    return obj;
                  })
                };
                return obj;
              })
            });
          });
          this.dataList=this.checkCityChildrenArr(this.dataList)
        });
      },
      //判断校验规则
      checkRules(item) {
        let arr = [];
        if (item.isbt == "1") {
          arr.push({ required: true, message: "必填字段", trigger: ["change", "blur"] });
        }
        if (item.sxlx == 4) {
          arr.push({ validator: this.checkNum, trigger: "blur" });
          // arr.push({ validator: this.checkStringLength, trigger: "blur" });
        }
        if (item.sxlx == 0 || item.sxlx == 5) {
          arr.push({ validator: this.checkStringLength, trigger: "blur" });
        }
        if (item.sxlx == 5) {
          arr.push({ validator: this.checkNumber, trigger: "blur" });
          // arr.push({ validator: this.checkStringLength, trigger: "blur" });
        }
        if (item.sxzd == "zbsdh") {
          arr.push({ validator: this.checkphone, trigger: ["change", "blur"] });
        }
        if (item.sxzd == "lxdh") {
            arr.push({ validator: this.checkMobile, trigger: ["change", "blur"] });
        }
        if (item.sxmc == "经度") {
          arr.push({ validator: this.checkJD, trigger: ["change", "blur"] });
        }
        if (item.sxmc == "纬度") {
          arr.push({ validator: this.checkWD, trigger: ["change", "blur"] });
        }
        if (item.sxmc == "次生灾害的影响及范围" || item.sxmc == "基本情况") {
          arr.push(
            { validator: this.range, trigger: "blur" }
          );
        }
        return arr;
      },

      //  编辑时赋值
      getZyjjmbsxValue() {
        baseServe.setZyjjmbSX({ zyjjmbID: this.zyjjmbId }).then(res => {
          if (res.data.baseZyjjmbModel) {
            let jbsxArrClone = this.form.jbsxArr;
            this.form.treeValue = res.data.baseZyjjmbModel.rfdwnm;
            jbsxArrClone.map((v,i) => {
              for (let k in res.data.baseZyjjmbModel) {
                if (k == v.sxzd) {
                  v.sxvalue = res.data.baseZyjjmbModel[k];
                  if (v.sxlx == 2 && v.sxvalue) {
                    v.sxvalue = new Date(v.sxvalue).getTime();
                  }
                }
              }
            });
            //下拉框信息获取
            if (res.data.baseZyjjmbModel.traitAttributeInfo && res.data.baseZyjjmbModel.traitAttributeInfo.length > 0) {
              this.form.gxsxArr.map((v) => {
                res.data.baseZyjjmbModel.traitAttributeInfo.map(k => {
                  if (k.sxbsxid == v.sxID) {
                    v.sxvalue = k.sxvalue;
                  }
                });
              });
            }
            setTimeout(()=>{
              jbsxArrClone.map((v,i) => {
                for (let k in res.data.baseZyjjmbModel) {
                  if (k == v.sxzd) {
                    if(v.sxzd=='mbxzhuang'&&(v.sxvalue==4002||v.sxvalue==4003)){
                      let temp= {"sxvalue":res.data.baseZyjjmbModel.jwd, "sxID": "jwd", "sxmc": `${v.sxvalue==4002?'线':'面'}的点集合`, "sxlx": "jwdval", "description": null, "sxzd": "jwd", "isbt": "0" }
                      if(res.data.baseZyjjmbModel.jwd&&res.data.baseZyjjmbModel.jwd.length>0){
                        this.form.jbsxArr.splice(i+1,0,temp)
                        this.xingzhuang.jwdArr=res.data.baseZyjjmbModel.jwd
                      }else if(v.sxvalue==4002){
                        this.mapSelectType = 'LineString'
                        this.xingzhuang.sxvalue=4002
                        this.xingzhuang.index=i
                        this.jwdForm.jwdArr=[['',''],['','']]

                      }else if(v.sxvalue==4003){
                        this.mapSelectType = 'Polygon'
                        this.xingzhuang.sxvalue=4003
                        this.xingzhuang.index=i
                        this.jwdForm.jwdArr=[['',''],['',''],['','']]
                      }

                    }
                  }
                }
              })
            },100)

          }
        });
      },
      //提交
      submitZyjjmb() {
        this.$refs["dynamicValidateForm"].validate((valid) => {
          if (valid) {
            let baseZyjjmbModel = {};
            this.form.jbsxArr.map(v => {
              if (v.sxzd) {
                baseZyjjmbModel[v.sxzd] = v.sxvalue;
              }
            });
            if (this.zyjjmbId) {
              baseZyjjmbModel.mbid = this.zyjjmbId;
            }
            if (this.categoryId) {
              baseZyjjmbModel.categoryid = this.categoryId;
            }
            baseZyjjmbModel.rfdwnm = Array.isArray(this.form.treeValue) ? this.form.treeValue[this.form.treeValue.length - 1] : this.form.treeValue;
           this.$store.state.zyjjmbRfdwnm=baseZyjjmbModel.rfdwnm
            if(this.xingzhuang.jwdArr&&this.xingzhuang.jwdArr.length>0){
              baseZyjjmbModel.jwd=this.xingzhuang.jwdArr
            }
            let params = {
              baseZyjjmbModel,
              traitAttributeModels: this.form.gxsxArr
            };
            baseServe.updateZyjjmbSX(params).then(() => {
              this.$emit("fun");
              this.$message({ type: "success", message: "保存成功" });
              this.$store.state.loadingFlag = true;
              // this.$store.state.zyjjmbId=''
              this.$refs["dynamicValidateForm"].resetFields()
              if(sessionStorage.getItem("sjwhChoseName")=='2'){
                this.$router.push('/sjwh/gjss',);
              }else{
                this.$router.push('/sjwh/sjsl/gjqy',);
                this.$emit("changeNum",2)
              }

              setTimeout(() => {
                this.$store.state.loadingFlag = false;
              }, 500);
            });
          } else {
            this.$message({ type: "warning", message: "请按照规则填写选项" });
            return false;
          }
        });


      },
      //取消
      backList() {
        this.$store.state.loadingFlag = true;
        this.$store.state.zyjjmbId = '';
        this.$refs["dynamicValidateForm"].resetFields();
        if(sessionStorage.getItem("sjwhChoseName")=='2'){
          this.$router.push('/sjwh/gjss',);
        }else{
          this.$emit("fun");
        }

        setTimeout(() => {
            this.$store.state.loadingFlag = false;
        }, 500);
      },
      //获取共性和个性属性
      async getZyjjmbSX() {
        const res = await baseServe.getZyjjmbSX({ categoryID: "", isGex: 0 });
        this.selecrArrList = this.selecrArrList.concat(res.data.zds);
        if (res.data.zyjjmbsxModels) {
          this.form.jbsxArr = [];
          res.data.zyjjmbsxModels.map(v => {
            v.sxvalue = "";
            if (v.sxlx == "1") {
              v.selectOption = res.data.zds[v.sxID];
            }
            this.form.jbsxArr.push(v);
          });
        }
        const result = await baseServe
          .getZyjjmbSX({ categoryID: this.categoryId, isGex: 1 });
        this.selecrArrList = this.selecrArrList.concat(result.data.zds);
        if (result.data.zyjjmbsxModels) {
          this.form.gxsxArr = [];
          result.data.zyjjmbsxModels.map(v => {
            v.sxvalue = "";
            if (v.sxlx == "1") {
              v.selectOption = result.data.zds[v.sxID];
              // v.description = null
            }
            this.form.gxsxArr.push(v);
          });
          // this.form.gxsxArr = res.data.zyjjmbsxModels;
        }
        if (this.zyjjmbId) {
          this.getZyjjmbsxValue();
        }
      }

    },
    components: {
      mapSelect: MapSelect
    }
  };
</script>

<style lang="less" scoped>
    .jbxx {
        height: 100%;
        width: 100%;
        .el-dialog__body {
            color: #00ffff;
            padding: 10px 80px 10px 38px;
            max-height: 500px;
            overflow-y: auto;
        }
       .zyjjmbDetailAdd .el-form-item {
            width: 50%;
            display: inline-block;
        }
        .fontGjqy {
            height: 40px;
            width: 100%;
            font-family: "Microsoft Yahei-Bold";
            color: #00ffff;
            font-size: 18px;
            display: flex;
            margin-bottom: 15px;
            position: relative;
            .el-button {
                position: absolute;
                right: 40px;
                top: 10px;
            }
        }
        .redwTable {
            width: 100%;
            // overflow-y: auto;
            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
            .detailTitle {
                font-family: "Microsoft Himalaya";
                font-size: 18px;
                color: #00ffff;
            }
            .buttonBox {
                /*margin-top: 20px;*/
                .el-dialog {
                    width: 400px;
                    height: 200px;
                    .el-dialog__body {
                        padding: 0;
                        width: 400px;
                        .el-select {
                            width: 260px;
                            margin-left: 70px;
                            margin-top: 20px;
                            // .el-input {
                            //   .el-input__inner {
                            //     margin: 0px 0px 0px 0px;
                            //     width: 260px;
                            //     height: 30px;
                            //     background-color: #1a303a;
                            //     border: #00f0ff 1px solid;
                            //     border-radius: 0;
                            //   }
                            //   .el-input--suffix .el-input__inner {
                            //     padding-right: 70px !important;
                            //   }
                            // }
                        }
                    }
                    .dialog-footer {
                        .el-button {
                            background-color: rgba(0, 255, 255, 0.32);
                            border-radius: 15px;
                            height: 30px;
                            line-height: 0;
                            font-family: "Microsoft Himalaya";
                            border: 0px;
                            width: 150px;
                        }
                    }
                }
                .el-button:focus,
                .el-button:hover {
                    color: #e4e4e4;
                    border: none;
                }
                // .btnDefault:active {
                //   // background-color: #0e757a;
                //   /*box-shadow:  0px 0px 10px 5px #08b1b6 inset;*/
                //   // background-image: url("../../assets/image/sjlr/add_on.png");
                //   color: #e4e4e4;
                // }
                // .btnDefault:focus {
                //   background-color: #0e757a;
                //   padding: 10px 30px;
                //   color: #e4e4e4;
                //   border: none;
                // }
            }
            .right_one_body {
                margin-top: 10px;
                background-color: transparent;
                height: 93%;
                width: 100%;
                padding: 0;
                position: relative;
                box-sizing: border-box;
                // .el-table th {
                //   background-color: #11657d;
                //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
                //   color: white;
                // }
                .el-table__body tr.current-row > td {
                    background-color: transparent;
                }

                .page {
                    margin-top: 20px;
                }
            }
        }
        .zyjjmbDetailAdd {
            height: calc(100% - 125px);
            width: 100%;

            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
            .jbxxStyle {
                height: 50%;
                width: 100%;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 10px 10px 5px;
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
            }
            .jbxxStyle_b {
                height: 50%;
                display: flex;
            }
            .txsxstyle {
                height: 50%;
                width: 100%;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 0px 10px 0px;
                overflow: hidden;
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
                .txsxstyle_box {
                    height: calc(100% - 20px);
                    padding-left: 30px;
                    .formBox {
                        overflow-y: auto;
                        height: 80%;
                        &::-webkit-scrollbar {
                            height: 6px;
                            width: 6px;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: rgba(5, 230, 230, 0.6);
                            border-radius: 30px;
                        }
                    }
                    // .el-form-item {
                    //   .el-form-item__label {
                    //     width: 90px !important;
                    //   }
                    // }
                    .el-icon-delete {
                        position: absolute;
                        right: 20px;
                        top: 10px;
                        color: white;
                        cursor: pointer;
                    }
                    .el-form-item:hover {
                        box-shadow: 0px 0px 10px 5px #08b1b6 inset;
                    }
                }
            }
            .sxbjStyle {
                height: 100%;
                width: 50%;
                /*border: 1px solid rgba(0,255,255,0.6);*/
                /*border-top: 2px solid rgba(0,255,255,0.6);*/
                border: 1px solid rgba(5, 230, 230, 0.3);
                border-top: 2px solid #00ffff;
                margin: 0 10px 10px 10px;
                .style_title {
                    height: 30px;
                    font-weight: 700;
                    font-size: 20px;
                    display: block;
                    color: white;
                    padding: 10px;
                    color: #00ffff;
                }
                .formBox {
                    overflow-y: auto;
                    height: calc(100% - 60px);
                    margin-top: 36px;
                    &::-webkit-scrollbar {
                        height: 6px;
                        width: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: rgba(5, 230, 230, 0.6);
                        border-radius: 30px;
                    }
                }
                .el-icon-plus {
                    font-size: 20px;
                    color: white;
                    position: absolute;
                    right: 40%;
                    top: 10px;
                    cursor: pointer;
                }
                //
                // .el-input__inner {
                //   background-color: #1a303a;
                //   width: 440px;
                //   border: 1px solid #00f0ff;
                //   height: 30px;
                // }
                .el-button {
                    border: 1px solid #00f0ff;
                    border-radius: 15px;
                    background-color: rgba(0, 255, 255, 0.32);
                    width: 200px;
                    height: 30px;
                    color: white;
                    line-height: 0;
                }
                .el-button:hover {
                    background-color: #1a303a;
                    border: 1px solid #00f0ff;
                    color: white;
                    text-align: center;
                }
            }
        }
    }
</style>
